<template >
  <div class="main">
    <div class="container">
      <UserCenter class="userinfo"></UserCenter>
      <div class="list">
        <el-skeleton
          :rows="10"
          animated
          style="width: 90%; height: 200px; margin-top: 20px"
          v-if="!isLoaded"
        />
        <el-empty
          v-if="list.length == 0"
          class="empty"
          description="您还没有收藏过任何报告~"
          :image-size="200"
        ></el-empty>
        <ReportList :list="list"></ReportList>
        <div class="page-view" v-show="list.length">
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :page-size.sync="params.pageSize"
            :current-page.sync="params.page"
            :total="total"
            @current-change="pageChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserCenter from "@/components/usercenter.vue";
import ReportList from "@/components/reportlist.vue";
import { getCollectHistory } from "@/api/user.js";

export default {
  data() {
    return {
      // 默认0， 赋值为数组
      list: 0,
      total: 0,
      params: {
        page: 1,
        pageSize: 10,
      },
      isLoaded: false,
    };
  },
  components: { UserCenter, ReportList },
  head() {
    return {
      title: "我的收藏-个人中心",
    };
  },
  created() {
    if (process.client) {
      this.getData();
    }
  },
  methods: {
    getData() {
      getCollectHistory(this.params).then((res) => {
        this.list = res.data.files;
        this.total = res.data.count;
        this.isLoaded = true;
      });
    },
    pageChange(page) {
      this.params.page = page;
      this.getData();
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0;
}

.container {
  width: 100%;
  max-width: 1250px;
  display: flex;
}

.userinfo {
  width: 260px;
  background: white;
  margin-right: 20px;
}

.list {
  width: calc(100% - 280px);
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 20px;
}

.page-view {
  margin-top: 20px;
}
.empty {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>